<template>
	<view class="index-page">
		
					  <view class="status_bar">
					           <!-- 这里是状态栏 -->
					       </view>
								<!-- <navTab  ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab> -->
								<v-tabs v-model="currentTab" :tabs="tabTitle" :pills="true" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
												  
		 <swiper style="min-height: calc(100vh - var(--status-bar-height) - 98upx);" 
		 :current="currentTab" 
		 @change="swiperTab"
		  duration="400"
		 skip-hidden-item-layout="true"
		
		  >
		  
		 	<swiper-item v-for="(item,index) in notice_data" :key="index">
		 		<scroll-view style="height: 100%;" scroll-y="true" class="scroll" 
					refresher-enabled="false"
					refresher-default-style="white"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort">
		 		<view class='content'>

					<contentItem></contentItem>
		 		{{item.course}}
		 		</view>
		 		

		 		</scroll-view>
		 	</swiper-item>
			
		 </swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab:0,
				tabTitle:[],
				notice_data:[],
				vheight:"72",
				
				showmoreArticle: false,
				refresherTriggered: false,
				_refresherTriggered: false,
				current:0,
				zhiding_text:"欢迎萌新！欢迎来到萌新圈!",

			}
			
		}, 
		onLoad() {

			this.$store.state.userdata.data.forEach((i,index,arrary)=>{
				i = i.replace(/'/g,'\"').replace(/False/g,'false').replace(/True/g,'true')
				i = eval('('+i+')')
				console.log(i)
				this.tabTitle.push(i.course)
				this.notice_data.push(i)
				
			})
			console.log(this.tabTitle)
			console.log(this.notice_data)
			// var data_arrary = Array.from(this.notice_data)
			// console.log(data_arrary)
			// data_arrary.forEach((item,index,arrary)=>{
			// 	console.log(item)
			// })
			// console.log(this.tabTitle)
		},
		methods: {
			openSearch(){
				uni.navigateTo({
					url:"../HM-search/HM-search"
				})
				console.log("ok")
			},
			openCamera(){
				uni.chooseImage({
					success() {
						cosole.log('照片获取成功')
					},
				})
			},
			onswiperchange(){},
			changeTab(index){
				this.currentTab = index
			},
			swiperTab(e) {
				var index = e.detail.current //获取索引
				this.currentTab = index;
			},
			 run() {
		
			   this.vheight = "0"
			        },
			back(){
				this.vheight = '72'
			},
			totrans(){
				uni.navigateTo({
					url:'../index-test/index-test'
				})
			},
			destoryArticle(id){
				console.log("收到触发了")
				this.articleList[id].show=false
	
			},
			onClickItem(e){
				this.current = e.currentIndex
			},
			refresherrefresh(){
					console.log("自定义下拉刷新被触发");
					let _this = this;
					if (_this._refresherTriggered) {
						return;
					}
					_this._refresherTriggered = true;
					//界面下拉触发，triggered可能不是true，要设为true
					if (!_this.refresherTriggered) {
						_this.refresherTriggered = true;
					}
					this.loadStoreData();
				},
			refresherrestore(){
					console.log("自定义下拉刷新被复位");
					let _this = this;
					_this.refresherTriggered = false;
					_this._refresherTriggered = false;
				},
			refresherabort(){
					console.log("自定义下拉刷新被中止	");
					let _this = this;
					_this.refresherTriggered = false;
					_this._refresherTriggered = false;
				},
			loadStoreData() {
					let _this = this;
					this.listData();
					setTimeout(() => {
						_this.refresherTriggered = false;//触发onRestore，并关闭刷新图标
						_this._refresherTriggered = false;
					}, 1000)
				},
				ansncFun(){
					return new Promise((resolve,reject)=>{
						
					})
				},
			listData() {
				let _this = this;
				_this.showmoreArticle = true;
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '/static/sounds/tongzhi.wav';
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
						
				setTimeout(()=>{
					
				this.run()
	setTimeout(()=>{_this.showmoreArticle = false
				_this.vheight = '72'
				},600)
				},2000)
					
					//这里是调用后台接口的方法数据
				},
		}
	}
</script>

<style lang="scss" scoped>
	  .status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.nav-center{
		width: 300upx;
		display: flex;

		justify-content: center;
	}
	.scroll {
		height: calc(100vh - var(--status-bar-height) - 90upx);
		background-color: #f6f6f6;
		.getMoreArticle{
			text-align: center;
			color: #FFFFFF;
			font-size: 26upx;
			height: 72upx;
			line-height: 72upx;
			background-color: #007aff;
			transition: all .5s;
		}
	}
	.animate{
		height: 0upx;
	}
	.status_bar {
		
	     height: var(--status-bar-height);
	     width: 100%;
	 } 
	/deep/ .segmented-control__text{
		font-size: 18px;
	}
	/deep/ .segmented-control{
		 height: 44px;
	}
	/deep/ .uni-tag--small {
		height: 32upx;
		line-height: 32upx;
		font-size: 20upx;
		vertical-align: middle;
	}
	/deep/ .uni-noticebar {
		margin-bottom: 0;
	}
	/deep/.uni-navbar__header-container{
		display: flex;
		justify-content: center;
	}
	.index_one_zhiding {
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		border: 2upx solid #f0f0f0;
		margin-top: -2upx;
		.tag{
			margin-left: 36upx;
		}
		.text {
			margin-left: 32upx;
			font-size: 30upx;

		}
	}

.inex_one_article {
	background-color: #ffffff;
	
		border-bottom:  2upx solid #f0f0f0;
		padding-top: 24upx;
		// margin: 10upx 20upx 0 0;
		margin-top: 16upx;
		margin-bottom: 16upx;
		display: flex;
		flex-direction: row;
	.article_left {
		display: flex;
		width: 155upx;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		.user_portrait {
				width: 80upx;
				height: 80upx;
				border-radius: 80upx;
				background-color: pink;
			}
		.concern{
			margin-top: 18upx;
				
			}
	}
	.article_right {
		margin-bottom: 14upx;
		width: 590upx;
		.user_name {
				font-size: 32upx;
	
				vertical-align: top;
				
			}
			
			.publish_time{
				font-size: 26upx;
				color: #878787;
			}
		.user_content{
			margin-top: 16upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			overflow: hidden;
			text-overflow: ellipsis;
			text {
				font-size: 33upx;
			}
		
		}
	}
}
.more {
	float:right;
}
.article_buttom{
			width: 360upx;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20upx;
			.t-icon {
			  width: 1.2em;
			  height: 1.2em;
			  vertical-align: -0.15em;
			  fill: currentColor;
			  overflow: hidden;
			  
			}
			
		}
.buttom-text {
		margin-left: 16upx;
		font-size: 20upx;
		color: #878787;
		position: absolute;
		bottom: 12upx;
		font-weight: bold;
			  }
.location {
	margin-top: 20upx;
	font-size: 24upx;
	color: #878787;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;}
	// .inex_one_article {
	// 	border: 2upx solid #f0f0f0;
	// 	padding-top: 24upx;
	// 	margin-top: -2upx;
	// 	.user_portrait {
	// 		width: 100upx;
	// 		height: 100upx;
	// 		border-radius: 85upx;
	// 		background-color: pink;
	// 	}
	// 	//ios端出现错误
		
	// 	.user_name {
	// 		font-size: 32upx;
	// 		font-weight: bold;
	// 		margin-left: 34upx;
	// 		vertical-align: top;
			
	// 	}
	// 	.concern{
	// 	margin-top: 10upx;
			
	// 	}
	// }
.container999 {
	  width: 100vw;
	  font-size: 28upx;
	  min-height: 100vh;
	  overflow: hidden;
	  color: #6B8082;
	  position: relative;
	  background-color: #f6f6f6;
	}
	.content {
		width: 100%;
	}
	
	.card {
		width: 90%;
		height: 368upx;
		background-color: white;
		margin: 0 auto 42upx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
	}
	
	.noCard {	
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}
	
	

</style>
